var Modal = require('./index');
var utils = require('../../modules/utils');

function _Layer(opts){
	var oid=utils.rand();
	var hid=utils.rand();
	var yid=utils.rand();
	var _alert=new Modal({
		type:opts.type,
		top:opts.top,
		left:opts.left,
		right:opts.right,
		width:opts.width,
		height:opts.height,
		mask:opts.mask,
		yes:opts.yes,
		no:opts.no,
		yesText:opts.yesText,
		noText:opts.noText,
		onOK:opts.onOK,
		autoDelete:true,
		showTypeline:false,
		alwaysCenter:opts.alwaysCenter,
		resize:opts.resize,
		onShow:function(){
			opts.onShow&&opts.onShow();
			setTimeout(()=>{
				document.getElementById(oid).onclick=function(){
					this.onClose&&this.onClose();
				}.bind(this);
			},1);
			// Dragable.init({
			// 	moveBar:document.getElementById(hid),
			// 	moveBox:document.getElementById(yid).parentNode
			// });

		},
		onClose:function(){
			opts.onClose&&opts.onClose();
			_alert.delete();
		},
		innerHTML:`
			<div class="yss-layer-splayer" id="${yid}">
				<div class="yss-layer-splayer-hd" id="${hid}">${opts.title}<i class="yss-splayer-close fr ease3" id="${oid}">×</i></div>
				<div class="yss-layer-splayer-bd" style=${"overflow:"+(opts.overflow?opts.overflow:'hidden')+";bottom:"+(!opts.yes&&!opts.no?0:68)+"px;"}>
					${opts.content}
				</div>
			</div>
		`
	});
	_alert.show();
}

var Layer = function(opts){
	_Layer({
		top:opts.top,
		left:opts.left,
		right:opts.right,
		width:opts.width||465,
		height:opts.height||280,
		title:opts.title||'提示',
		content:opts.content,
		mask:opts.mask!==undefined?opts.mask:true,
		yes:opts.yes!==undefined?opts.yes:true,
		no:opts.no!==undefined?opts.no:true,
		yesText:opts.yesText,
		noText:opts.noText,
		onOK:opts.onOK,
		onClose:opts.onClose,
		resize:opts.resize,
		onShow:opts.onShow,
		alwaysCenter:opts.alwaysCenter
	});
};
	
module.exports = Layer;